* {
	margin: 0;
	padding: 0;
}
html, body {
	width: 100%;
	height: 100%;
	background-color: #000;
}
.container {
	position: relative;
	width: 1200px;
	height: calc(100% - 60px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
	grid-template-rows: repeat(3, 1fr);
	background-color: #000;
	padding: 30px;
	margin: 0 auto;
	overflow: hidden;
}
.item {
	display: flex;
	align-items: center;
	justify-content: center;
}
.item img {
	object-fit: cover;
	cursor: pointer;
	display: block;
}
.pointer {
	--l: 30px; /* 四角线框的长度 */
	--t: 3px; /* 四角线框的厚度 */
	--g: 15px; /* 四角线框到图片的间隙 */
	--w: 367px; /* 图片的尺寸，动态 */
	--h: 267px; /* 图片的尺寸，动态 */
	--x: 30px; /* 图片左上角坐标 */
	--y: 30px; /* 图片左上角坐标 */
	position: absolute;
	width: calc(var(--w) + 2 * var(--g));
	height: calc(var(--h) + 2 * var(--g));
	border: var(--t) solid #fff;
	left: calc(var(--x) - var(--g));
	top: calc(var(--y) - var(--g));
	transition: 0.3s;
	mask: conic-gradient(at var(--l) var(--l), transparent 75%, blue 75%) 0 0 / calc(100% - var(--l)) calc(100% - var(--l));
}